<template>
	<view class="page_bg page">
		<!-- 搜索 -->
		<view class="page_top">
			<view class="search" @click="gotoPage('/pagesCommon/search/search')">
				<uni-icons type="search" size="18" color="#999" class="icon"></uni-icons>
				<input class="text" type="text" :value="search" disabled placeholder="搜索医生、疾病、科室" />
			</view>
			<view class="messages">
				<image src="@/static/icon/index/messags-icon.png" mode="widthFix"></image>
				<view class="total">
					1
				</view>
			</view>
		</view>
		<!-- 金刚区 -->
		<view class="card service">
			<view class="service_item" @click="gotoPage('/pagesCommon/search/outpatientService?consultWay=1')">
				<view class="icon">
					<image src="@/static/icon/index/ptmz-icon.png" mode="widthFix"></image>
				</view>
				<view class="text">
					普通门诊
				</view>
			</view>
			<view class="service_item" @click="gotoPage('/pagesCommon/search/outpatientService?consultWay=2')">
				<view class="icon">
					<image src="@/static/icon/index/zjmz-icon.png" mode="widthFix"></image>
				</view>
				<view class="text">
					专家门诊
				</view>
			</view>
			<view class="service_item" @click="gotoPage('/pagesCommon/reservation/reservation')">
				<view class="icon">
					<image src="@/static/icon/index/yygh-icon.png" mode="widthFix"></image>
				</view>
				<view class="text">
					预约挂号
				</view>
			</view>
		</view>
		<!-- 标题 我的候诊室 -->
		<view class="title">
			<view class="text">
				我的候诊室
			</view>
			<view class="more">
				去查看
				<uni-icons class="icon" type="right" size="12" color="#999"></uni-icons>
			</view>
		</view>
		<!-- 我的候诊室 -->
		<view class="waiting">
			<view class="waiting_left background_image_wdwz" @click="gotoPage('/pagesCommon/consultation/myConcerned')">
				<view class="waiting_title">
					<view class="text">
						我的问诊
					</view>
					<view class="title_tips blue">
						便携
					</view>
				</view>
				<view class="waiting_subtitle">
					我的问诊
				</view>
				<view class="btns waiting_btn">
					立即查看
				</view>
			</view>
			<view class="waiting_right">
				<view class="waiting_right_top background_image_wdcf"
					@click="gotoPage('/pagesCommon/prescription/myPrescription')">
					<view class="waiting_title">
						<view class="text">
							我的处方
						</view>
						<view class="title_tips green">
							贴心安全
						</view>
					</view>
					<view class="waiting_subtitle">
						医生开具的处方
					</view>
					<view class="btns waiting_btn">
						立即查看
					</view>
				</view>
				<view class="waiting_right_bottom background_image_wdys" @click="gotoPage('/pagesCommon/doctor/myDoctor')">
					<view class="waiting_title">
						<view class="text">
							我的医生
						</view>
						<view class="title_tips yellow">
							权威
						</view>
					</view>
					<view class="waiting_subtitle">
						医生开具的处方
					</view>
					<view class="btns waiting_btn">
						立即查看
					</view>
				</view>
			</view>
		</view>
		<!-- 标题 找医生 -->
		<view class="title">
			<view class="text">
				找医生
			</view>
		</view>
		<!-- 找医生 -->
		<view class="consult_doctor">
			<view class="consult_doctor_item background_image_ajpz">
				<view class="consult_doctor_item_title">
					<view class="text">
						按疾病找
					</view>
					<view class="btns consult_doctor_item_title_btns">
						快
					</view>
				</view>
				<view class="consult_doctor_item_subtitle">
					999种疾病/ <text class="yellow">快速</text>接诊
				</view>
			</view>
			<view class="consult_doctor_item background_image_aksz">
				<view class="consult_doctor_item_title">
					<view class="text">
						按科室找
					</view>
				</view>
				<view class="consult_doctor_item_subtitle">
					999种科室/<text class="blue">三甲</text>医院
				</view>
			</view>
		</view>
		<!-- 其他工具 -->
		<view class="menu">
			<view class="menu_title">
				其他工具
			</view>
			<view class="menu_list">
				<view class="menu_item" @click="gotoPage('/pagesCommon/reservation/myReservation')">
					<view class="menu_item_icon">
						<image src="@/static/icon/index/wdyy-icon.png" mode="widthFix"></image>
					</view>
					<view class="menu_item_text">
						我的预约
					</view>
				</view>
				<view class="menu_item" @click="gotoPage('/pagesCommon/consultation/consultationDoctorsList')">
					<view class="menu_item_icon">
						<image src="@/static/icon/index/wdyz-icon.png" mode="widthFix"></image>
					</view>
					<view class="menu_item_text">
						我的会诊
					</view>
				</view>
				<view class="menu_item" @click="gotoPage('/pagesCommon/prescription/renewalPrescriptionList')">
					<view class="menu_item_icon">
						<image src="@/static/icon/index/zxxf-icon.png" mode="widthFix"></image>
					</view>
					<view class="menu_item_text">
						在线续方
					</view>
				</view>
				<view class="menu_item" @click="gotoPage('/pagesCommon/interested/myInterested')">
					<view class="menu_item_icon">
						<image src="@/static/icon/index/wdgz-icon.png" mode="widthFix"></image>
					</view>
					<view class="menu_item_text">
						我的关注
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		onLoad() {},
		methods: {
			gotoPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.page_top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.search {
				flex: 0 0 80%;
				width: 80%;
				display: flex;
				align-items: center;
				padding: 20rpx;
				border: 2px solid #3B6CFE;
				border-radius: 20rpx;

				.icon {
					margin-right: 20rpx;
				}

				input {
					width: 100%;
					font-size: 24rpx;
				}
			}

			.messages {
				position: relative;
				width: 60rpx;
				height: 70rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.total {
					position: absolute;
					left: 50%;
					top: 20%;
					transform: translateY(-50%);
					display: inline-block;
					background-color: #FC5149;
					font-size: 22rpx;
					padding: 4rpx 14rpx;
					border-radius: 50rpx;
					color: #fff;
				}
			}
		}

		.service {
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.service_item {
				text-align: center;

				.icon {
					width: 155rpx;
					height: 155rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.waiting {
			margin: 30rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.waiting_title {
				display: flex;
				align-items: center;

				.text {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.waiting_subtitle {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: #999999;
			}

			.waiting_btn {
				margin: 0;
				margin-top: 10rpx;
				padding: 10rpx 20rpx;
				display: inline-block;
				border: 1px solid #3B6CFE;
				background-color: #fff;
				color: #3B6CFE;
				font-size: 24rpx;
			}

			.waiting_left {
				flex: 0 0 48%;
				padding: 20rpx;
				overflow: hidden;
				border-radius: 20rpx;
				box-sizing: border-box;
			}

			.waiting_right {
				flex: 0 0 48%;

				.waiting_right_top {
					margin-bottom: 15rpx;
					height: 180rpx;
					padding: 20rpx;
					overflow: hidden;
					border-radius: 20rpx;
				}

				.waiting_right_bottom {
					margin-top: 15rpx;
					height: 180rpx;
					padding: 20rpx;
					overflow: hidden;
					border-radius: 20rpx;

					.waiting_title {
						font-size: 28rpx;
					}
				}
			}

		}

		.consult_doctor {
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.consult_doctor_item {
				flex: 0 0 48%;
				width: 48%;
				height: 200rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				box-sizing: border-box;

				.consult_doctor_item_title {
					display: flex;
					align-items: center;

					.text {
						font-size: 38rpx;
						font-weight: bold;
					}

					.consult_doctor_item_title_btns {
						margin: 0;
						margin-left: 10rpx;
						font-size: 24rpx;
						padding: 4rpx 24rpx;
						background: linear-gradient(90deg, rgba(245, 129, 44, 1) 0%, rgba(249, 214, 94, 1) 50%);
					}
				}

				.consult_doctor_item_subtitle {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: #999999;

					.yellow {
						color: #E57444;
					}

					.blue {
						color: #3E6EFE;
					}
				}
			}
		}

		.menu {
			padding: 20rpx;
			background-color: #FFF;
			border-radius: 20rpx;

			.menu_title {
				margin-bottom: 30rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
			}

			.menu_list {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.menu_item {
					flex: 0 0 25%;
					text-align: center;

					.menu_item_icon {
						width: 60rpx;
						height: 60rpx;
						margin: 0 auto;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.menu_item_text {
						margin-top: 20rpx;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>